<template>
  <div id="loginDom">
    <unify-header></unify-header>
    <div class="register m">
      <div class="reLe l">
        <div class="rep2">
          <div class="login_welcome">
            <img src="http://image2.artup.com/static/pc/imgs/common/logo_1.jpg">
            <span>欢迎回来</span>
          </div>
          <span>没有账号？</span>
          <a href="/user/register/register"><span class="redd">马上注册</span></a>
        </div>
        <el-form :model="numberValidateForm" :rules="rules" ref="numberValidateForm" class="demo-ruleForm">
          <!--用户名-->
          <el-form-item class="repb repb1" prop="telephoneNumber" :rules="rules.telephoneNumber">
            <el-input placeholder="请输入手机号"
                      :maxlength="11"
                      :minlength="11"
                      v-model="numberValidateForm.telephoneNumber"></el-input>
          </el-form-item>
          <!--密码-->
          <el-form-item class="repb repb4" prop="password" :rules="rules.password">
            <el-input type="password" placeholder="输入密码" v-model="numberValidateForm.password"
                      auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
        <div class="zc01">
          <a @click="submitForm('numberValidateForm')" class="zhuce">登录&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;LOGIN</a>
        </div>
        <div class="repb_zhuc repb6">
          <div class="newlL l">
            <div class="rok m">
              <p class="roker m"></p>
            </div>
          </div>
          <div class="rerr l">
            下次自动登录
          </div>
          <a href="/user/findPassword/findPassword" class="password_out">忘记密码</a>
        </div>
      </div>
      <div class="reRe r">
        <p>使用第三方账号
          <br><span>实现快速注册</span>
        </p>
        <ul class="reUl">
          <li class="oli1" @click="login">
            <a><i style="color: #0cb209;font-size: 30px;position: relative;left: -10px;top: 5px;" class="iconfont">&#xe605;</i>微信登录</a>
          </li>
        </ul>
      </div>
    </div>
    <unify-footer></unify-footer>
  </div>
</template>
<script>
  import {ALERT_CUSTOM} from 'base/js/common.config'
  import Header from '@/components/header/header.vue'
  import Footer from '@/components/footer/footer.vue'
  import Api from '@/api.js'

  export default {
    data() {
      return {
        numberValidateForm: {
          telephoneNumber: '',
          password: ''
        },
        rules: {
          telephoneNumber: [
            {required: true, message: '请输入手机号', trigger: 'blur'},
            {min: 11, message: '手机号长度为11位', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '密码不能为空'}
          ]
        }
      }
    },
    components: { //引入组件
      'unify-header': Header,
      'unify-footer': Footer
    },
    methods: { //执行的方法函数
      submitForm(formName) {
        let from = this.numberValidateForm
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let jsons = {
              mobile: from.telephoneNumber,
              pwd: from.password
            }
            Api.userInfoList.userLogin(jsons).then((res) => {
              if (res.data.data.photoUrl !== '') {
                localStorage.setItem('avatar', res.data.data.photoUrl)
              }
              if (res.data.status === 'OK') {
                if (this.$route.query.Callback) {
                  window.location.href = '/user/loginCallback?userDbId=' + res.data.data.passId + '&userName=' + res.data.data.nickname + '&Callback=true'
                } else {
                  window.location.href = '/user/loginCallback?userDbId=' + res.data.data.passId + '&userName=' + res.data.data.nickname
                }
              } else {
                this.$alert(res.data.message, '提示', ALERT_CUSTOM)
                return false
              }
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      getCodeNumber() {
        if (this.numberValidateForm.telephoneNumber !== '') {
          Api.userInfoList.getCodeNumber({
            mobile: this.numberValidateForm.telephoneNumber,
            type: 'register'
          }).then((res) => {
            console.log(res)
          })
        }
      },
      login: function () {
        Api.user.login({"t": "1"}).then(res => {
          window.location.href = res.data.authorizeCodeUrl
          // console.log(res.data.authorizeCodeUrl)
        }, err => {
          console.log(err)
          // alert('Error')
        })
      }
    },
    created() {
      if (localStorage.userDbId) {
        location.href = '/'
      }
    },
    mounted() {
    }
  }
</script>

<style lang="scss" type="text/scss" rel="stylesheet/sass">
  #loginDom {
    width: 100%;
    height: 100%;
    .register {
      width: 960px;
      height: auto;
      overflow: hidden;
      margin-top: 14px;
      .reLe {
        width: 660px;
        border: 1px solid #d8d8d8;
        background: white;
        padding-bottom: 30px;
        margin-bottom: 80px;
        .rep2 {
          font-size: 18px;
          margin-top: 60px;
          padding-right: 96px;
          text-align: right;
          margin-bottom: 55px;
          line-height: 40px;
          overflow: hidden;
          .login_welcome {
            float: left;
            margin: 0px 0px 0 48px;
            font-size: 30px;
            color: #333;
            overflow: hidden;
            > img {
              margin-right: 30px;
              cursor: pointer;
              vertical-align: middle;
              border: none;
              outline: none;
            }
          }
        }
        .repb {
          height: 55px;
          padding-left: 118px;
          margin-bottom: 28px;
          position: relative;

        }
        .inputWidth {
          width: 260px;
          float: left;
        }
        .el-form-item__content {
          width: 460px;
          height: 50px;
        }
        .el-input__inner {
          height: 100% !important;
        }
        .el-input {
          height: 100% !important;
        }
        .repb1 {
          background: url(./f-sj_03.png) no-repeat 39px 0;
        }
        .repb4 {
          background: url(./f-tb_10.png) no-repeat 40px center;
        }
        .zc01 {
          text-align: center;
        }
        .zhuce {
          height: 30px;
          width: 202px;
          font-size: 16px;
          color: white;
          border-radius: 4px;
          background: #A00912;
          border: none;
          cursor: pointer;
          display: inline-block;
          line-height: 30px;
          margin-top: 22px;
        }
        .repb_zhuc {
          height: 55px;
          padding-left: 118px;
          margin-top: 36px;
          .password_out {
            line-height: 50px;
            font-size: 16px;
            float: right;
            color: #a00912;
            margin-right: 86px;
          }
        }
        .newlL {
          width: 30px;
          height: 50px;
          cursor: pointer;
        }
        .l {
          float: left;
        }
        .rok {
          height: 16px;
          width: 16px;
          border: 1px solid #C1C1C1;
          margin-top: 16px !important;
        }
        .roker {
          height: 8px;
          width: 8px;
          border-radius: 4px;
          background: #A00912;
          margin-top: 4px !important;
        }

        .rerr {
          line-height: 50px;
          font-size: 16px;
          margin-left: 15px;
          cursor: pointer;
        }
        .l {
          float: left;
        }
        .m {
          margin: 0 auto;
        }
      }
      .reRe {
        width: 282px;
        height: 492px;
        border: 1px solid #d8d8d8;
        background: white;
        margin-bottom: 30px;
        float: right;
        > p {
          text-align: center;
          font-size: 24px;
          line-height: 30px;
          margin-top: 50px;
          margin-bottom: 10px;
        }
        .reUl li {
          height: 60px;
          margin-bottom: 45px;
          line-height: 60px;
          cursor: pointer;
          transition: all 0.4s;
          position: relative;
        }
        .oli1 {
          background: url(http://test.artup.com/img/dsf-f_06.jpg) no-repeat 40px center
        }
        .reUl li a {
          font-size: 18px;
          color: #333;
          margin-left: 120px;
        }
        .reUl li:hover {
          left: 8px;
        }
      }
      .redd {
        color: #A00912;
      }
      .l {
        float: left;
      }
      .reRe {
        width: 282px;
        height: 492px;
        border: 1px solid #d8d8d8;
        background: white;
        margin-bottom: 30px;
      }
      .r {
        float: right;
      }

    }

  }
</style>
